﻿<template>
  <s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
    <uni-forms
      ref="addressFormRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="160"
      labelAlign="left"
      border
      :labelStyle="{ fontWeight: 'bold' }"
    >
      <view class="bg-white form-box ss-p-x-30">
        <uni-forms-item name="name" label="收货人" class="form-item">
          <uni-easyinput
            v-model="state.model.name"
            placeholder="请填写收货人姓名"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </uni-forms-item>

        <uni-forms-item name="phone" label="手机号" class="form-item">
          <uni-easyinput
            v-model="state.model.phone"
            type="number"
            placeholder="请输入手机号"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item
          name="region"
          label="省市区"
          @tap="onRegionTap"
          class="form-item"
        >
          <uni-easyinput
            v-model="state.model.region"
            disabled
            :inputBorder="false"
            :styles="{ disableColor: '#fff', color: '#333' }"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请选择省市区"
          >
            <template v-slot:right>
              <uni-icons type="right"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item
          name="detailAddress"
          label="详细地址"
          :formItemStyle="{ alignItems: 'flex-start' }"
          :labelStyle="{ lineHeight: '5em' }"
          class="textarea-item"
        >
          <uni-easyinput
            :inputBorder="false"
            type="textarea"
            v-model="state.model.detailAddress"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请输入详细地址"
            clearable
          ></uni-easyinput>
        </uni-forms-item>
      </view>

      <view
        class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box"
      >
        <view class="default-box-title"> 设为默认地址 </view>
        <su-switch
          style="transform: scale(0.8)"
          v-model="state.model.isDefault"
        ></su-switch>
      </view>
    </uni-forms>
    <su-fixed
      bottom
      :opacity="false"
      bg=""
      placeholder
      :noFixed="false"
      :index="10"
    >
      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
        <view class="ss-m-b-20"
          ><button
            class="ss-reset-button save-btn ui-Shadow-Main"
            @tap="onSave"
          >
            保存
          </button></view
        >
        <button
          v-if="state.model.id"
          class="ss-reset-button cancel-btn"
          @tap="onDelete"
        >
          删除
        </button>
      </view>
    </su-fixed>
    <!-- 省市区弹窗 -->
    <su-region-picker
      v-if="state.areaDataLoaded"
      :show="state.showRegion"
      @cancel="state.showRegion = false"
      @confirm="onRegionConfirm"
      :valArr="state.model.fullArea"
    >
    </su-region-picker>
  </s-layout>
</template>

<script setup>
import { computed, watch, ref, reactive, unref } from "vue";
import sheep from "@/sheep";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import _ from "lodash";
import { name, phone, detailAddress, region } from "@/sheep/validate/form";

const addressFormRef = ref(null);
const state = reactive({
  showRegion: false,
  areaDataLoaded: false, // 区域数据加载状态
  model: {
    name: "",
    phone: "",
    detailAddress: "",
    is_default: false,
    region: "",
    fullArea: [null, null, null], // 初始化为包含三个null的数组，避免组件访问undefined
  },
  rules: {
    name,
    phone,
    detailAddress,
    region,
  },
});
const currentRole = computed(() => sheep.$store("user").currentRole);

watch(
  () => state.model.province,
  (newValue) => {
    if (newValue) {
      state.model.fullArea = [
        state.model.provinceId,
        state.model.cityId,
        state.model.districtId,
      ];
      state.model.region = `${state.model.province}-${state.model.city}-${state.model.district}`;
    }
  },
  {
    deep: true,
  }
);
const onRegionTap = () => {
  if (!state.areaDataLoaded) {
    uni.showToast({
      title: '区域数据加载中...',
      icon: 'loading',
      duration: 1500
    });
    return;
  }
  state.showRegion = true;
};

const onRegionConfirm = (e) => {
  const {
    city_id,
    city_name,
    district_id,
    district_name,
    province_id,
    province_name,
  } = e;
  state.model = {
    ...state.model,
    province: province_name,
    city: city_name,
    district: district_name,
    provinceId: province_id,
    cityId: city_id,
    districtId: district_id,
  };
  state.showRegion = false;
};
const getAreaData = () => {
  if (_.isEmpty(uni.getStorageSync("areaData"))) {
    sheep.$api.data.area().then((res) => {
      let areaData = null;
      
      // 处理不同的API返回格式
      if (Array.isArray(res)) {
        // API直接返回数组
        areaData = res;
      } else if (res && res.data && Array.isArray(res.data)) {
        // API返回包装对象 {code, msg, data}
        areaData = res.data;
      } else {
        state.areaDataLoaded = false;
        return;
      }
      
      // 验证数据结构是否正确（每个省份应该有children属性）
      if (areaData.length > 0 && areaData[0].name) {
        uni.setStorageSync("areaData", areaData);
        state.areaDataLoaded = true;
      } else {
        state.areaDataLoaded = false;
      }
    }).catch((error) => {
      state.areaDataLoaded = false;
    });
  } else {
    // 数据已存在，标记为已加载
    state.areaDataLoaded = true;
  }
};
const onSave = async () => {
  const validate = await unref(addressFormRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;

  let res = null;
  const params = { ...state.model };
  params.isDefault = params.isDefault ? 1 : 0;
  if (state.model.id) {
    res = await sheep.$api.user.address.update(params);
  } else {
    res = await sheep.$api.user.address.create(params);
  }
  if (res > 0) {
    sheep.$router.back();
  }
};

const onDelete = () => {
  uni.showModal({
    title: "提示",
    content: "确认删除此收货地址吗？",
    success: async function (res) {
      if (res.confirm) {
        await sheep.$api.user.address.delete(state.model.id);
        sheep.$router.back();
      }
    },
  });
};
onLoad(async (options) => {
  getAreaData();
  if (options.id) {
    let res;
    res = await sheep.$api.user.address.detail(options.id);
    state.model = {
      ...state.model,
      ...res,
    };
    // 设置fullArea数组用于区域选择器
    if (res.provinceId && res.cityId && res.districtId) {
      state.model.fullArea = [res.provinceId, res.cityId, res.districtId];
    }
  }

  if (options.data) {
    let data = JSON.parse(options.data);
    state.model = {
      ...state.model,
      ...data,
    };
    // 设置fullArea数组用于区域选择器
    if (data.provinceId && data.cityId && data.districtId) {
      state.model.fullArea = [data.provinceId, data.cityId, data.districtId];
    }
  }
});
</script>

<style lang="scss" scoped>
:deep() {
  .uni-forms-item__label .label-text {
    font-size: 28rpx !important;
    color: #333333 !important;
    line-height: normal !important;
  }

  .uni-easyinput__content-input {
    font-size: 28rpx !important;
    color: #333333 !important;
    line-height: normal !important;
    padding-left: 0 !important;
  }

  .uni-easyinput__content-textarea {
    font-size: 28rpx !important;
    color: #333333 !important;
    line-height: normal !important;
    margin-top: 8rpx !important;
  }

  .uni-icons {
    font-size: 40rpx !important;
  }

  .is-textarea-icon {
    margin-top: 22rpx;
  }

  .is-disabled {
    color: #333333;
  }
}

.default-box {
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;

  .default-box-title {
    font-size: 28rpx;
    color: #333333;
    line-height: normal;
  }
}

.footer-box {
  .save-btn {
    width: 710rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(
      90deg,
      var(--ui-BG-Main),
      var(--ui-BG-Main-gradient)
    );
    color: $white;
  }

  .cancel-btn {
    width: 710rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: var(--ui-BG);
  }
}
</style>
